<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-14 15:08:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-08 21:16:04
-->
<template>
  <div ref="bottom1_container" style="height: 95%"></div>
</template>

<script>
import { get } from "../../../utils/request";
import { Pie } from "@antv/g2plot";

export default {
  data() {
    return {
      dataArr: [],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      get("/dashboard/queryDeviceOnlineNumber").then((res) => {
        this.dataArr = res.data;
        this.initChart();
      });
    },
    initChart() {
      const piePlot = new Pie(this.$refs.bottom1_container, {
        appendPadding: 10,
        data: this.dataArr,
        angleField: "value",
        colorField: "type",
        radius: 0.9,
        interactions: [{ type: "element-active" }],
      });
      piePlot.render();
    },
  },
};
</script>